<!DOCTYPE html>
<!-- Created by 白墨 on 2021/4/17 22:36:12-->
<html lang="zh-cmn-Hans-CN"  xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments ::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>

</head>

<body>
<!-- 导航 -->
<nav th:replace="_fragments::menu(3)" class="ui inverted attached segment m-shadow-small">
</nav>


<!-- 中间部分 -->
<div id="comment-form" class="ui form tm-qt">
    <input type="hidden" name="blog.id" th:value="${blog.id}">
    <input type="hidden" name="parentComment.id" value="-1">
    <div class="field">
        <textarea name="content" placeholder="请输入评论信息..."></textarea>
    </div>
    <div class="fields">
        <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input tm-qt">
                <i class="user icon"></i>
                <input type="text" name="nickname" class="tm-qt" placeholder="你的昵称" th:value="${session.user}!=null ? ${session.user.nickname}">
            </div>
        </div>
        <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input tm-qt">
                <i class="mail icon"></i>
                <input type="text" name="email" class="tm-qt" placeholder="邮箱（不会被公开）" th:value="${session.user}!=null ? ${session.user.email}">
            </div>
        </div>
        <div class="field  m-margin-bottom-small m-mobile-wide">
            <button id="commentpost-btn" type="button" class="ui green button m-mobile-wide"><i class="edit icon"></i>发布</button>
        </div>
    </div>
</div>

<br>
<br>


<!-- 底部 -->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment m-padded-tb-massive">
</footer>


<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/js/APlayer.min.js" th:src="@{/js/APlayer.min.js}"></script>
<script src="../static/js/music.js" th:src="@{/js/music.js}"></script>
<!--    雪花特效-->
<script src="../static/js/snow.js" th:src="@{/js/snow.js}"></script>
<!--板娘 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 75,
            "height": 150,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>
<script>
    $('.menu.toggle').click(function() {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('#newblog-container').load("[[@{/footer/newblog}]]");

    //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            },
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });
</script>
</body>

</html>